<template>
	<view class="person-container">
		<u--form labelPosition="top" labelWidth="auto" :model="account" ref="uForm">
			<u-form-item label="用户名" prop="userName" borderBottom>
				<u--input v-model="account.userName" border="none" disabled />
			</u-form-item>
			<u-form-item label="真实姓名" prop="realName" borderBottom>
				<u--input v-model="account.realName" border="none" />
			</u-form-item>
			<u-form-item label="年龄" prop="age" borderBottom>
				<u--input v-model="account.age" border="none" type="number" />
			</u-form-item>
			<u-form-item label="性别" prop="sex" borderBottom>
				<radio-group @change="sexChange">
					<label class="sex-radio">
						<text>男</text>
						<radio :value="1" :checked="account.sex==1" />
					</label>
					<label class="sex-radio">
						<text>女</text>
						<radio :value="2" :checked="account.sex==2" />
					</label>
				</radio-group>
			</u-form-item>
			<u-form-item label="出生日期" prop="birthDay" borderBottom>
				<view class="birthDay" @click="showDate = true">{{birthDay}}</view>
			</u-form-item>
			<u-form-item label="手机" prop="phone" borderBottom>
				<u--input v-model="account.phone" border="none" />
			</u-form-item>
			<u-form-item label="年级" prop="userLevel" borderBottom>
				<view class="level-picker">
					<picker @change="bindPickerChange" v-model="account.userLevel -1" :range="levelList">
						<view>{{levelList[account.userLevel -1]}}</view>
					</picker>
				</view>
			</u-form-item>
			<u-form-item>
				<u-button type="primary" text="保存" @click="editAccount()" />
			</u-form-item>
		</u--form>
		<u-datetime-picker :show="showDate" v-model="birthDay" mode="date" :minDate="0" :maxDate="Date.now().valueOf()"
			@confirm="confirmDate" @cancel="showDate = false"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import http from '../../http';
	export default {
		data() {
			return {
				account: {},
				showLevel: false,
				showDate: false,
				birthDay: '',
				levelList: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三']
			}
		},
		methods: {
			getAccount() {
				http({
					url: '/api/student/user/current',
					method: 'POST'
				}).then(res => {
					console.log(res);
					this.account = res.response
					this.birthDay = res.response.birthDay.slice(0, 10)
				})
			},
			bindPickerChange: function(e) {
				this.account.userLevel = e.detail.value - 0 + 1
				console.log(this.account.userLevel);
			},
			editAccount() {
				http({
					url: '/api/student/user/update',
					method: 'POST',
					data: this.account
				}).then(res => {
					console.log(res);
					if (res.code === 1) {
						this.$refs.uToast.show({
							type: "success",
							message: "保存成功",
							duration: 1000,
							complete() {
								uni.switchTab({
									url: '/pages/my/my'
								})
							},
						});
					}
				})
			},
			sexChange(e) {
				// console.log(e.detail.value);
				this.account.sex = e.detail.value
			},
			async confirmDate(e) {
				// console.log(e.detail.value);
				this.account.birthDay = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
				this.birthDay = this.account.birthDay.slice(0, 10)
				this.showDate = false
			}
		},
		onLoad() {
			this.getAccount()
		},
		onShow() {
			this.getAccount()
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

		.person-container {
			width: 750rpx;
			height: 100%;
			background-color: #F7F7F7;

			.u-form-item {
				margin: 0 20rpx;

				input {
					height: 80rpx;
					background-color: #FFFFFF;
					padding-left: 30rpx;
				}

				.sex-radio {
					height: 80rpx;
					border: 1rpx solid #F7F7F7;
					background-color: #FFFFFF;
					padding: 0 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.level-picker {
					height: 80rpx;
					background-color: #FFFFFF;
					padding-left: 30rpx;
					display: flex;
					align-items: center;
				}

				button {
					margin-bottom: 20rpx;
				}

				.birthDay {
					height: 80rpx;
					background-color: #FFFFFF;
					padding-left: 30rpx;
					display: flex;
					align-items: center;
				}

			}
		}
	}
</style>